import React, { Component, PropTypes } from "react";
import { connect } from "react-redux";
import { getHomeDataAction } from "../store/actions/HomeAction";
import { renderRoutes } from "react-router-config";
import homeStyle from "../../styles/homeStyle.css";
import globalData from "../../src/GlobalData";
class Home extends Component {
  constructor(props) {
    super(); //必须调用super构造完父组件后才能使用this
  }

  goGameLobby = event => {
    this.props.history.push("/gameLobby");
  };

  componentDidMount() {
    console.log("HOMESTYLE", homeStyle);
  }

  renderHomeJsx = () => {
    console.log("renderHomeJsx", this.props.homeData);
    return this.props.homeData.map((item, i) => {
      return (
        <div key={i} className={homeStyle.pinkBackground}>
          <div>标题:{item.title}</div>
          <div>{item.descript}</div>
        </div>
      );
    });
  };

  render() {
    return (
      <div>
        {/*渲染子路由*/}
        {this.renderHomeJsx()}
        <button
          onClick={this.goGameLobby}
          className={homeStyle.beautifulButton}
        >
          跳转到导航页
        </button>
        {renderRoutes(this.props.route.routes)}
      </div>
    );
  }
}
Home.styleInit = () => {
  console.log("styleInit ...");
  globalData.globalStyle.push(homeStyle._getCss());
};
Home.loadData = function(store) {
  return store.dispatch(getHomeDataAction);
};

let mapStateToProps = state => {
  return state.HomeReducer;
};
export default connect(mapStateToProps, null)(Home);
